<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->
<script type="text/javascript" src="../../libs/js/pic/gallery.js"></script>
<link href="../../sample_html/pic/gallery/gallery.css" rel="stylesheet"/>
<style>
#gallery {
    padding: 30px;
    background: #eeeeee;
  }
  #descriptions {
    position: relative;
    height: 50px;
    background: #EEE;
    margin-top: 10px;
    width: 640px;
    padding: 10px;
    overflow: hidden;
  }
    #descriptions .ad-image-description {
      position: absolute;
    }
      #descriptions .ad-image-description .ad-description-title {
        display: block;
      }	
</style>
<body>
<div id="gallery" class="ad-gallery">
      <div class="ad-image-wrapper">
      </div>
      <div class="ad-controls">
      </div>
      <div class="ad-nav">
        <div class="ad-thumbs">
          <ul class="ad-thumb-list">
            <li>
              <a href="../../libs/images/demo/gallery/1.jpg">
                <img src="../../libs/images/demo/gallery/thumbs/t1.jpg" class="image0">
              </a>
            </li>
            <li>
              <a href="../../libs/images/demo/gallery/2.jpg">
                <img src="../../libs/images/demo/gallery/thumbs/t2.jpg" title="图片标题" alt="这是图片的相关描述信息" class="image1">
              </a>
            </li>
            <li>
              <a href="../../libs/images/demo/gallery/3.jpg">
                <img src="../../libs/images/demo/gallery/thumbs/t3.jpg" title="图片标题" longdesc="http://uileader.com" alt="这是图片的相关描述信息" class="image2">
              </a>
            </li>
            <li>
              <a href="../../libs/images/demo/gallery/4.jpg">
                <img src="../../libs/images/demo/gallery/thumbs/t4.jpg" title="图片标题" alt="这是图片的相关描述信息" class="image3">
              </a>
            </li>
            <li>
              <a href="../../libs/images/demo/gallery/5.jpg">
                <img src="../../libs/images/demo/gallery/thumbs/t5.jpg" title="图片标题" alt="这是图片的相关描述信息" class="image4">
              </a>
            </li>
            <li>
              <a href="../../libs/images/demo/gallery/6.jpg">
                <img src="../../libs/images/demo/gallery/thumbs/t6.jpg" title="图片标题" alt="这是图片的相关描述信息" class="image5">
              </a>
            </li>
            <li>
              <a href="../../libs/images/demo/gallery/7.jpg">
                <img src="../../libs/images/demo/gallery/thumbs/t7.jpg" title="图片标题" alt="这是图片的相关描述信息" class="image6">
              </a>
            </li>
            <li>
              <a href="../../libs/images/demo/gallery/8.jpg">
                <img src="../../libs/images/demo/gallery/thumbs/t8.jpg" title="图片标题" alt="这是图片的相关描述信息" class="image7">
              </a>
            </li>
            <li>
              <a href="../../libs/images/demo/gallery/9.jpg">
                <img src="../../libs/images/demo/gallery/thumbs/t9.jpg" title="图片标题" alt="这是图片的相关描述信息" class="image8">
              </a>
            </li>
            <li>
              <a href="../../libs/images/demo/gallery/10.jpg">
                <img src="../../libs/images/demo/gallery/thumbs/t10.jpg" title="图片标题" alt="这是图片的相关描述信息" class="image9">
              </a>
            </li>
           
          </ul>
        </div>
      </div>
    </div>

  </div>
  <script>
     $(function() {
   // $('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...');
   // $('img.image1').data('ad-title', 'Title through $.data');
   // $('img.image4').data('ad-desc', 'This image is wider than the wrapper, so it has been scaled down');
   // $('img.image5').data('ad-desc', 'This image is higher than the wrapper, so it has been scaled down');
    var galleries = $('.ad-gallery').adGallery();
    $('#switch-effect').change(
      function() {
        galleries[0].settings.effect = $(this).val();
        return false;
      }
    );
    $('#toggle-slideshow').click(
      function() {
        galleries[0].slideshow.toggle();
        return false;
      }
    );
    $('#toggle-description').click(
      function() {
        if(!galleries[0].settings.description_wrapper) {
          galleries[0].settings.description_wrapper = $('#descriptions');
        } else {
          galleries[0].settings.description_wrapper = false;
        }
        return false;
      }
    );
  }); 
    
  </script>
</body>
</html>